<script setup lang="ts">
import * as templateApi from "/wailsjs/go/api/TemplateApi"
import Edit from "@/views/codegen/edit.vue";
import {useQuasar} from 'quasar'
import Gen from "./gen.vue";
import {useWindowSize} from '@vueuse/core'
import { GenCode} from "/wailsjs/go/api/GenerateApi";

const {width, height} = useWindowSize()

const $q = useQuasar()
const templateList = ref([])

function getData() {
  templateApi.GetTemplates().then(res => {
    if (res.success) {
      templateList.value = res.data
    } else {
      $q.notify({
        type: 'negative',
        message: res.msg
      })
    }
  })
}


function onEditTemplate(template) {
  $q.dialog({
    component: Edit,
    // 转发到自定义组件的 props
    componentProps: {
      template: template,
    }
  }).onOk(() => {
    getData()
  }).onCancel(() => {
    console.log('Cancel')
  }).onDismiss(() => {
    console.log('Called on OK or Cancel')
  })
}

function onCopy(template) {
  templateApi.CopyTemplate(template).then(res => {
    if (res.success) {
      $q.notify({
        message: '操作成功',
      })
      getData()
    } else {
      $q.notify({
        type: 'negative',
        message: res.msg
      })
    }
  })
}

function onDelete(template) {
  $q.dialog({
    title: '确认删除',
    message: '是否确认删除该模板组',
    cancel: true,
    bordered: true
  }).onOk(() => {
    templateApi.DeleteTemplate(template).then(res => {
      if (res.success) {
        $q.notify({
          message: '操作成功',
        })
        getData()
      } else {
        $q.notify({
          type: 'negative',
          message: res.msg
        })
      }
    })
  }).onOk(() => {
    // console.log('>>>> second OK catcher')
  }).onCancel(() => {
    // console.log('>>>> Cancel')
  }).onDismiss(() => {
    // console.log('I am triggered on both OK and Cancel')
  })
}

function onOpenEditor(template) {
  $q.dialog({
    component: Gen,
    componentProps: {
      title: template.Name,
      keyx: template.Key,
    }
  }).onOk(() => {
    console.log('OK')
  }).onCancel(() => {
    console.log('Cancel')
  }).onDismiss(() => {
    console.log('Called on OK or Cancel')
  })
}

function onGen(template) {
  GenCode(template.Key,template.Name).then(res => {
    $q.notify({
      message: '生成成功',
    })
  })
}

onMounted(() => {
  getData()
})
</script>

<template>
  <div class="fit q-pa-md overflow-auto">
    <div class="flex q-gutter-md justify-start overflow-auto ">
      <q-card class="template-card " flat bordered @click.stop="onEditTemplate()">
        <div class="flex column flex-center fit  cursor-pointer">
          <q-icon name="add" size="50px"></q-icon>
          新增模板
        </div>
      </q-card>
      <template v-for="template  in templateList" :key="template.Key">
        <q-card class="template-card cursor-pointer" flat bordered @click="onOpenEditor(template)">
          <q-card-section style="height: 180px" class="q-pt-xs ">
            <div class="text-h6 q-mt-sm q-mb-xs">
              <q-tooltip>
                {{ template.Name }}
              </q-tooltip>
              <div class="ellipsis">{{ template.Name }}</div>
            </div>
            <div class="text-caption text-grey">
              <q-tooltip>
                {{ template.Description }}
              </q-tooltip>
              {{ template.Description }}
            </div>
          </q-card-section>
          <q-separator/>
          <q-card-actions>
            <q-btn @click.stop="onGen(template)" flat color="primary">
              生成
            </q-btn>
            <q-btn flat @click.stop="onEditTemplate(template)">
              信息编辑
            </q-btn>
            <q-btn flat @click.stop="onCopy(template)">
              复制
            </q-btn>
            <q-btn flat color="red" @click.stop="onDelete(template)">
              删除
            </q-btn>
          </q-card-actions>
        </q-card>
      </template>

    </div>
  </div>
</template>

<style scoped>
.template-card {
  width: 31.5%;
  min-width: 220px;
  min-height: 200px;
  outline: hidden;
}
</style>
